import { Menu, Drawer } from 'antd';
import { Form, Input, Button, Checkbox,notification } from 'antd';
import jwt_decode from "jwt-decode";
import React from 'react';
import axios from 'axios'
import {
  UserOutlined,
} from '@ant-design/icons';
import Register from './Register';

class User extends React.Component {
  state = {
    collapsed: false,
    visible: false,
    childrenDrawer: false,
  };
  getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
         }
         if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
         }
     }
    return "";
} 
  componentDidMount(){
    var payload = jwt_decode(this.getCookie("token"), { header: false });
    console.log(payload);
    this.setState({
      username:payload.username
    })
  }
  toggleCollapsed = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  };

  showDrawer = () => {
    this.setState({
      visible: true,
    });
  };
  showChildrenDrawer = () => {
    this.setState({
      childrenDrawer: true,
    });
  };
  clearAllCookie() {
    var keys = document.cookie.match(/[^ =;]+(?=\=)/g);
    if(keys) {
      for(var i = keys.length; i--;)
        document.cookie = keys[i] + '=0;expires=' + new Date(0).toUTCString()
    }
    window.location.reload();
  }
  onChildrenDrawerClose = () => {
    this.setState({
      childrenDrawer: false,
    });
  };
  onClose = () => {
    this.setState({
      visible: false,
    });
  };

  render() {


    return (
      <div style={{ width: 256 }}>
        <Menu theme="dark" mode="inline" selectable={false} onClick={this.showDrawer}>
          <Menu.Item key="1" icon={<UserOutlined />} >
            个人中心
            </Menu.Item>
        </Menu>
        <Drawer
          title={this.state.username}
          width={480}
          onClose={this.onClose}
          visible={this.state.visible}
          bodyStyle={{ paddingBottom: 80 }}
          footer={
            <div
              style={{
                textAlign: 'right',
              }}
            >
            </div>
          }
        >
          <Button type="link" onClick={this.clearAllCookie}>登出</Button>
        </Drawer>
      </div>
    );
  }
}

export default User;